<template>
    <div class="info-collect">
        <Crumb name="Unit Quotation"></Crumb>
        <div class="content">
            <el-button
                    type="primary"
                    @click="openAdd"
            >Add New Quotation
            </el-button>
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="Search By Qutation Number"
                        prefix-icon="el-icon-search"
                ></el-input>
                <el-button
                        size="small"
                        type="primary"
                >Search
                </el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="visitList"
                        border
                        stripe
                        style="width: 100%">

                    <el-table-column
                            prop="quotation"
                            label="Quotation Number"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="requestDate"
                            label="Request Date"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="requestBy"
                            label="Request By"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="customerName"
                            label="Customer"
                            width="150">
                    </el-table-column>

                    <el-table-column
                            prop="status"
                            label="Status"
                    >
                    </el-table-column>
                    <el-table-column label="Opr">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="openEdit(scope.row)">Detail
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>

            </div>

            <div class="modal-wrapper">
                <el-dialog
                        title="Unit Quotation"
                        :visible.sync="dialogVisible"
                        width="100%"
                >
                    <el-form ref="ruleForm" label-width="200px" class="demo-ruleForm" :inline="true">
                        <el-form-item label="Request No">
                            <el-input class="input" v-model="requestNo"></el-input>
                        </el-form-item>
                        <el-form-item label="RequestDate">
                            <el-date-picker class="input" v-model="requestDate"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="Request By">
                            <el-select class="input" v-model="requestBy">
                                <el-option value="Clikarang">Clikarang</el-option>
                                <el-option value="Andy">Andy</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="Customer">
                            <el-select class="input" v-model="customerName">
                                <el-option value="Clikarang">PT.KINGSUM TECH</el-option>
                                <el-option value="Andy">PT.INLINE TECH</el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="Status" prop="status">
                            <el-select class="input" v-model="status">
                                <el-option value="1">save</el-option>
                                <el-option value="2">submit</el-option>
                                <el-option value="3">approved</el-option>
                                <el-option value="4">poed</el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>

                    <div class="spin"></div>

                    <el-button @click="showUnit" type="primary" size="small">
                        Select Unit <i class="el-icon-plus"> </i>
                    </el-button>

                    <!-- unit table start -->
                     <el-table  :data="unitList"
                                border
                                stripe>
                         <el-table-column type="expand">
                             <template slot-scope="props">
                                 <el-form label-position="left" inline class="demo-table-expand">
                                     <div v-for="(item,index) in props.row.options" :key="index">
                                         <el-form-item label="Options">
                                             <span>{{ item.value }}</span>
                                         </el-form-item>
                                     </div>

                                 </el-form>
                             </template>
                         </el-table-column>
                         <el-table-column
                                 prop="brand"
                                 label="Brand"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="unitType"
                                 label="Unit Type"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="series"
                                 label="Series"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="capacity"
                                 label="Capacity"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="models"
                                 label="Models"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="engine"
                                 label="Engine"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="transmission"
                                 label="Transmission"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="battery"
                                 label="Battery"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="charger"
                                 label="Charger"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="mast"
                                 label="Mast"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="forks"
                                 label="Forks"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="tyres"
                                 label="Tyres"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="port"
                                 label="Port"
                         >
                         </el-table-column>
                         <el-table-column
                                 prop="price"
                                 label="Price"
                         >
                         </el-table-column>

                     </el-table>
                    <!--unit table end-->

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Cancel</el-button>
                        <el-button type="primary" @click="submitForm">Confirm</el-button>
                        <el-button type="warning" @click="openPdf">Convert to SO</el-button>
                    </span>
                </el-dialog>

                <el-dialog  :visible.sync="unitShow" width="80%">
                    <el-form :inline="true">
                        <el-form-item label="Brand">
                            <el-select v-model="brand">
                                <el-option value="Hangcha">Hangcha</el-option>
                                <el-option value="Xugong">Xugong</el-option>
                                <el-option value="Longgong">Longgong</el-option>
                                <el-option value="Shanqi">Shanqi</el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item v-if="model.label" :label="model.label">
                            <el-select v-model="unitType">
                                <el-option v-for="item in model.value" :value="item.key" :key="item.key">
                                    {{item.key}}
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="model && unitType" label="Series">
                            <el-select v-model="series">
                                <el-option value="3-w J series forklift rear wheel motivated type">
                                    3-w J series forklift rear wheel motivated type
                                </el-option>
                                <el-option value="3-wheel A series electric forklift">
                                    3-wheel A series electric forklift
                                </el-option>
                                <el-option value="3-wheel J series electric forklift">
                                    3-wheel J series electric forklift
                                </el-option>
                                <el-option value="4-wheel A series electric forklift">
                                    4-wheel A series electric forklift
                                </el-option>
                                <el-option value="X series diesel forklift">
                                    X series diesel forklift
                                </el-option>

                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="model && unitType" label="Capacity">
                            <el-select v-model="capacity">
                                <el-option value="2T">
                                    2T
                                </el-option>
                                <el-option value="2.5T">
                                    3T
                                </el-option>
                                <el-option value="5T">
                                    5T
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item v-if="model && unitType" label="Models">
                            <el-select v-model="models">
                                <el-option value="CPCD25N-RG2">CPCD25N-RG2</el-option>
                                <el-option value="CPCD25N-RW10">CPCD25N-RW10</el-option>
                                <el-option value="CPCD30N-RW43">CPCD30N-RW43</el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item v-if="model && unitType && unitType==='AC' && models" label="Engine">
                            <el-input v-model="engine"></el-input>
                        </el-form-item>
                        <el-form-item v-if="model && unitType && unitType==='AC' && models" label="Transmission">
                            <el-input v-model="transmission"></el-input>
                        </el-form-item>
                        <el-form-item v-if="model && unitType && unitType==='DC' && models" label="Battery">
                            <el-select v-model="battery">
                                <el-option value="2PZS220">2PZS220</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="model && unitType && unitType==='DC' && models" label="Charger">
                            <el-select v-model="charger">
                                <el-option value="2PZS220">2PZS220</el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item v-if="model && unitType && models" label="Mast">
                            <el-select v-model="mast">
                                <el-option value="2.0M Duplex Mast">2.0M Duplex Mast</el-option>
                                <el-option value="2.5M Duplex Mast">2.5M Duplex Mast</el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item v-if="model && unitType && models" label="forks">
                            <el-select v-model="forks">
                                <el-option value="920mm pucker fork">920mm pucker fork</el-option>
                                <el-option value="1150mm pucker fork">1150mm pucker fork</el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item v-if="model && unitType && models" label="tyres">
                            <el-select v-model="tyres">
                                <el-option value="Super elastic tyre (solid tyre)">Super elastic tyre (solid tyre)
                                </el-option>
                                <el-option value="No mark tyre">No mark tyre</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item v-if="model && unitType && models" label="Port">
                            <el-select v-model="port">
                                <el-option value="Sumatara">Sumatara</el-option>
                                <el-option value="Sulawesi">Sulawesi</el-option>
                            </el-select>
                        </el-form-item>
                        <div v-if="model && unitType && models">
                            <el-form-item v-for="(option,index) in options"
                                          label="options" :key="index">
                                <el-select v-model="option.value">
                                    <el-option value="loading bracket">loading bracket</el-option>
                                    <el-option value="guide wheel">guide wheel</el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <el-button v-if="model && unitType && models" @click="options.push({value:''})">
                            <i class="el-icon-plus"></i>
                        </el-button>

                    </el-form>
                    <div v-if="models" class="price">Quotation Price: $ {{price | numFilter}}</div>

                    <span slot="footer" class="dialog-footer">
                        <el-button @click="unitShow = false">Cancel</el-button>
                        <el-button type="primary" @click="chooseUnit">Confirm</el-button>
                    </span>
                </el-dialog>

            </div>
        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'
    // import pdf from '../../util/pdf'
    // import pdfMake from 'pdfmake/build/pdfmake'
    // import pdfFonts from 'pdfmake/build/vfs_fonts'
    // pdfMake.vfs = pdfFonts.pdfMake.vfs;
    export default {
        name: "info-collect",
        data() {
            return {
                unitList:[],
                unitShow: false,
                visitList: [{
                    quotation: '0000001',
                    customerName: "Violence",
                    requestDate: '2018-12-12',
                    requestBy: "Ptetnonoer",
                    status: 'Save',
                    id: 2
                }],
                carData: [
                    {
                        brand: 'Hangcha',
                        model: {
                            name: "unitType",
                            label: '类型',
                            value: [
                                {
                                    key: 'AC'
                                }, {
                                    key: 'DC'
                                }, {
                                    key: 'WH'
                                }]
                        }
                    }
                ],
                model: {},
                requestNo: '',
                requestDate: '',
                requestBy: '',
                customerName: '',
                status: '',
                unitType: '',
                capacity: '',
                series: '',
                models: '',
                engine: 'Xinchai China：C490BPG-416',
                transmission: "Chinese",
                battery: '',
                charger: '',
                mast: '',
                forks: '',
                tyres: '',
                port: '',
                options: [
                    {value: ''}
                ],
                price: '133929250',
                brand: '',
                key: '',
                total: 10,
                dialogVisible: false
            }
        },
        filters: {

            numFilter(value) {

                // 截取当前数据到小数点后两位

                let realVal = Number(value).toFixed(2)

                // num.toFixed(2)获取的是字符串

                return Number(realVal)

            }

        },
        mounted(){
            this.$nextTick(()=>{
                 import('../../util/pdf.js').then(model=>{
                     this.pdf = model.default
                 });
            })
        },
        methods: {
            openPdf(){
                if(!this.pdf){
                    this.$msgbox({
                        title:'Loading',
                        message:'pdf模块正在加载中'
                    });
                    return
                }
                this.pdf && this.pdf.open();
            },
            chooseUnit(){
                const {brand,unitType,capacity,series,models,engine,transmission,battery,charger,mast,forks,tyres,port,options,price} = this
                const unit = {brand,unitType,capacity,series,models,engine,transmission,battery,charger,mast,forks,tyres,port,options,price};
                this.unitList.push(unit);
                this.unitShow = false;
                this.clear();
            },
            showUnit() {
                this.unitShow = true;
            },
            submitForm() {
                this.dialogVisible = false
            },
            clear() {
                this.model={};
                this.brand='';
                this.unitType='';
                this.capacity='';
                this.series='';
                this.models='';
                this.battery='';
                this.charger='';
                this.mast = '';
                this.forks='';
                this.tyres = '';
                this.port='';
                this.price='';
                this.options=[{value:''}]
            },
            openAdd() {
                this.clear();
                this.dialogVisible = true
            },
            openEdit() {
                this.dialogVisible = true
            },
            changePage(page) {
                alert(page)
            }
        },
        watch: {
            brand(b) {
                this.model = this.carData.find(item => item.brand === b) ? this.carData.find(item => item.brand === b).model : ''
            },
            mast() {
                this.price = this.price + 1
            },
            tyres() {
                this.price = this.price + 2
            },
            forks() {
                this.price = this.price + 3
            },
            options() {
                this.price = this.price + 4
            },
            port() {
                this.price = this.price * 1.5
            }
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    .info-collect {
        background: #f6;
        .content {
            text-align: left;
            padding: 20px 0;
            .table-wrapper {
                margin-top: 20px;
            }
            .page {
                text-align: center;
                margin-top: 10px;
            }
        }
        .price {
            font-size: 20px;
            margin-top: 30px;
            text-align: center;
        }
        .spin {
            border-bottom: 2px solid #ddd;
            margin-bottom: 30px;
        }
        .input {
            width: 200px;
        }
    }
</style>